import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  FileOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme, ConfigProvider,Input,Avatar } from 'antd';
import { useHistory } from 'react-router-dom';
import { Content } from 'antd/es/layout/layout';
const { Header, Sider } = Layout;
const Usermanagement = () => {
    const { Search } = Input;
    //搜索
    const onSearch = (value, _e, info) => console.log(info?.source, value);
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const [collapsed, setCollapsed] = useState(false);
    // 更改页面
    const [value, setValue] = useState('');
    const handleSider = (e) => {
        setValue(e.key);
    }
    const history = useHistory();
    //点击退出登录，跳转到登录页面
    const tClick = () => {
        history.push("/Login");
    };
    //点击内容审核，跳转到已审核页面
    const nClick = () => {
        history.push("/Audit");
    };
     
    return (
        // 主题颜色
        <ConfigProvider
            theme={{
                token: {
                    // Seed Token，影响范围大
                    colorPrimary: '#55CA92',
                    borderRadius: 20,
                    // 派生变量，影响范围小
                    colorBgContainer: 'white',
                },
            }}
        >
        <Layout>
            <Sider 
            style={{
                borderRadius: 20,
                background: '#95de64',
                marginRight: 33,
                width: 500,
            }}
            trigger={null}
            collapsible
            collapsed={collapsed}>
            {/* 导航栏 */}
            <Menu
                style={{
                    background: '#55CA92',
                    borderRadius: 20,
                    minHeight: '98vh'
                    }}
                mode="inline"
                defaultSelectedKeys={['1']}
                onClick={handleSider}
                selectedKeys={[value]}
            >
                <Menu.Item key="1" icon={<UserOutlined />} label="用户管理" style={{marginTop:120}}>用户管理</Menu.Item>
                <Menu.Item key="2" icon={<FileOutlined />} label="内容审核" style={{marginTop:40}} onClick={nClick}>内容审核</Menu.Item>
            </Menu>
            </Sider>
            {/* Header头部 */}
            <Layout>
                <Header 
                    style={{
                        padding: 0,
                        background: '#F7F3F3',
                        margin: 10,
                        height: 50,
                        borderRadius: 10,
                        display: 'flex',
                     }}
                >
                    {/* 导航收起按钮 */}
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 33,
                            height: 33,
                            margin: '10px',
                        }}
                    />
                    <div style={{
                        width: "100%",
                        display:'flex',
                        height:100,
                        border:'1px solid #F7F3F3',
                        borderRadius:10, 
                        background:'white',
                        textAlign:'center'
                        }}
                    >
                        {/* 搜索框 */}
                        <Search 
                        placeholder="搜索关键字"
                        onSearch={onSearch}
                        style={{width: 300,marginTop:30}}
                        />
                        {/* 头像 */}
                        <Avatar size={50} icon={<UserOutlined />} style={{left:480}}/>
                        {/* 退出登录按钮 */}
                        <button style={{
                            marginLeft:410,
                            marginTop:60,
                            width: 100,
                            height: 30,
                            background: '#55CA92',
                            borderRadius: 5,
                            border: '1px solid #BEBEBE',
                        }}
                        onClick={tClick}
                        >
                            退出登录
                        </button>   
                    </div>
                    </Header>
                    <Content>
                        
                    </Content>
                </Layout>
            </Layout>
        </ConfigProvider>
    );
};

export default Usermanagement;